<template>
  <div>
    <div class="search_warp">
      <van-search
        class="search"
        v-model="searchValue"
        background="#fff"
        clearable
        shape="round"
        placeholder="请输入搜索关键词"
      />
      <van-button class="search_btn" round @click="searchConfirm"
        >搜索</van-button
      >
    </div>
    <tabs
      :tab-list="tabsList"
      :sticky="true"
      tabsIndexName="tabActiveOrderPeopleOrder"
      @changeTab="changeTab"
    >
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="哼，我也是有底线的~"
        :immediate-check="false"
        :offset="0"
        @load="onLoadData"
      >
        <!-- 订单类型(1零食2美妆3数码4外卖5食堂6站点快递[代取]7站点快递[寄出]8二手商品9领跑者订单) -->
        <div v-if="orderList.length > 0" class="shopping_warp">
          <div v-for="item in orderList" :key="item.shopId">
            <!-- 二手商品和领跑者 -->
            <other-order
              v-if="item.orderType === 8"
              :item="item"
              source="manage"
              @toOrderDetails="toOrderDetails"
              @deleteOrder="deleteOrder"
              @toPayment="toPayment"
            />
          </div>
        </div>
        <van-empty v-else description="您还没有此类订单哦~" />
      </van-list>
    </tabs>
  </div>
</template>
<script>
import { getData, upData } from '@/api/api.js'

import Tabs from '@/components/common/Tabs.vue'

import SnackOrderList from '@/components/manage/snackShopOrder/SnackOrderList.vue'

export default {
  components: {
    Tabs,
    SnackOrderList,
  },
  data() {
    return {
      searchValue: '',
      loading: false,
      finished: false,
      pageIndex: 0,
      userId: JSON.parse(window.sessionStorage.getItem('userInfo'))
        ? JSON.parse(window.sessionStorage.getItem('userInfo')).id
        : 0,
      tabIndex: Number(sessionStorage.getItem('tabActiveOrderPeopleOrder'))
        ? Number(sessionStorage.getItem('tabActiveOrderPeopleOrder'))
        : 0,
      tabsList: [
        {
          title: '全部单',
        },
        {
          title: '待受理',
        },
        {
          title: '已受理',
        },
        {
          title: '配送中',
        },
        {
          title: '已完成',
        },
        {
          title: '被撤销',
        },
      ],
      orderList: [],
    }
  },
  created() {
    this.getUserOrder(this.tabIndex)
  },
  methods: {
    // 获取订单
    async getUserOrder(tabIndex) {
      // oState=0待受理，已受理1，配送中2，已完成3,被撤销4不传为全部
      const data = {
        pageIndex: this.pageIndex,
        pageLimit: 10,
        shopId: this.userId,
      }
      if (tabIndex !== 0) {
        data.oState = tabIndex - 1
      }
      const res = await getData('/order/info/user/all', data, {
        showLoading: true,
      })
      this.loading = false
      console.log(res)
      if (res.code === '4x10003') {
        this.finished = true
      }
      if (res.code === '0') {
        this.orderList.push(...res.data.orderInfoVo)
        this.pageIndex += 1
        if (this.pageIndex * 10 >= res.data.number) {
          this.finished = true
        }
        return false
      }
      this.$handleCode.handleCode(res)
    },
    // 删除订单
    async deleteOrder(cOrderSn) {
      if (this.tabIndex !== 4 || this.tabIndex !== 5) {
        return this.$toast.fail('该订单还在执行中不能删除！')
      }
      const res = await upData(
        '/order/info/user/delete',
        { cOrderSn },
        { showLoading: true }
      )
      console.log(res)
      if (res.code === '0') {
        this.orderList = []
        this.pageIndex = 0
        this.finished = false
        this.getUserOrder(this.tabIndex)
        return false
      }
      this.$handleCode.handleCode(res)
    },
    searchConfirm() {},
    changeTab(index) {
      console.log(index)
      this.tabIndex = index
      this.orderList = []
      this.pageIndex = 0
      // this.searchPageIndex = 1
      this.finished = false
      // this.isSearch = false
      // this.searchValue = ''
      this.getUserOrder(this.tabIndex)
    },
    toOrderDetails(cOrderSn) {
      this.$router.push('/orderDetailsOfManage?cOrderSn=' + cOrderSn)
    },
    // 上拉加载数据
    onLoadData() {
      // 解决点击tab会重复发送请求
      if (this.orderList.length > 0) {
        this.getUserOrder(this.tabIndex)
      }
    },
  },
}
</script>
<style lang="less" scoped>
.search_warp {
  display: flex;
  padding: 0 1rem;
  background-color: #fff;
  align-items: center;
  .search {
    width: 80%;
    height: 3.5rem;
    margin-right: 1rem;
    .van-cell {
      height: 2rem;
    }
    .van-search__content {
      border: 2px solid @themeColor;
    }
  }
  .search_btn {
    width: 5rem;
    height: 2rem;
    background-color: @themeColor;
    color: #fff;
  }
}
</style>
